<template>
  <div class="carkParking" v-cloak>
    <!-- {{ state.park.list }} -->
    <div class="carkParking-header">
      <img src="../../assets/img/park.png" alt="" srcset="">
      <strong>流动车位剩余数</strong>
    </div>
    <van-row>
      <van-col :span="12" v-for="(item, index) in state.park.list" :key="index">
        <div>
          <van-icon name="location-o" />
          <span>{{ item.text }}: </span>
        </div>
        <span class="text-num" :style="{color: dealParkingNumber(item.num, item.num_use_extend) == '000' ? 'red' : '#0eec3a'}">
          {{ dealParkingNumber(item.num, item.num_use_extend) }}
        </span>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import {
  computed,
  defineComponent,
  onMounted,
  onUnmounted,
  reactive,
  ref,
} from "@vue/runtime-core";
import { GetParkCarList } from "@/api/index";
import { useStore } from "vuex";

export default defineComponent({
  name: "pcparking",
  setup() {
    //   变量区域
    const list = reactive([]);
    const timer = ref(null);
    const store = useStore();

    // 方法区域
    const dealParkingNumber = (num1, num2) => {
      let count = Number(num1) - Number(num2);
      return count > 100 ? count : count > 10 ? '0' + count : count < 10 ? '00' + count : '000';
    };
    const initData = () => {
      // 后台接口注释
      store.dispatch("park/GetParkCarList").then((res) => {
        console.log("store");
      });
    };
    // 使用store
    const state = computed(() => {
      return store.state;
    });

    // 获取初始化数据
    onMounted(() => {
      initData();
      timer.value = setInterval(() => {
        initData();
      }, 10000);
    });
    onUnmounted(() => {
      window.clearInterval(timer);
    });
    return {
      list,
      dealParkingNumber,
      state,
    };
  },
});
</script>

<style lang="less" scoped>
.carkParking {
  width: 100vw;
  height: 100vh;
  // background: #59adf8;
  background: #fff;
  .van-row {
    height: 40vh;
    .van-col {
      font-size: 10vh;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      border: 1px solid #59adf8;
      height: 40vh;
      span {
        color: #59adf8;
      }
      .van-icon {
        color: #59adf8;
      }
      .text-num{
        color: #0eec3a;
        font-size: 14vh;
      }
    }
  }
  .carkParking-header{
    height: 20vh;
    strong{
      font-size: 10vh;
      color: #f4ea2a;
      vertical-align: bottom;
    }
    img{
      height: 20vh;
    }
  }
}
</style>
